'use client';

import Avatar from '@/asset/avatar.png';
import { authClient } from '@/lib/auth-client';
import { cn } from '@/lib/utils';
import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import QueryImage from '../common/query-image';
import AvatarWrapper from './avatar-wrapper';

const nav = [
  {
    title: '外卖',
    path: '/',
  },
  {
    title: '订单',
    path: '/order',
  },
  {
    title: '消息',
    path: '/message',
  },
];

export default function UserHeader() {
  const { data: session } = authClient.useSession();
  const user = session?.user;
  const pathname = usePathname();
  return (
    <div className="flex items-center justify-between fixed z-50 top-0 w-full px-10 backdrop-blur shadow bg-background/50">
      <div className="flex self-end h-10">
        {nav.map((item) => (
          <Link href={item.path} key={item.path}>
            <div
              className={cn(
                'px-5 h-full',
                pathname === item.path && 'border-b-2 border-foreground',
              )}
            >
              {item.title}
            </div>
          </Link>
        ))}
      </div>
      <div className="text-xl font-bold absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2">
        <Link href="/">RIN TAKEOUT</Link>
      </div>
      <div className="py-2">
        <AvatarWrapper>
          <QueryImage
            imageKey={user?.image}
            defaultImage={Avatar}
            wrapperClassName="w-10 h-10 rounded-full"
            imgClassName="w-full h-full object-cover rounded-full"
          />
        </AvatarWrapper>
      </div>
    </div>
  );
}
